<template>
  <div class="hm-detail">
    <van-nav-bar title="面经详情" left-text="返回" @click-left="onBack" />
    <div class="article">
      <div class="article-header">
        <img :src="article.avatar" alt="Creator Avatar" class="avatar" />
        <span class="creator">{{ article.creator }}</span>
        <span class="created-at">{{ article.createdAt }}</span>
      </div>
      <div class="article-content">
        <h2 class="stem">{{ article.stem }}</h2>
        <p class="content">{{ article.content }}</p>
      </div>
      <div class="article-footer">
        <span class="like-count">点赞: {{ article.likeCount }}</span>
        <span class="views">浏览: {{ article.views }}</span>
      </div>
      <div class="btn">
        <van-icon name="like-o" :class="{ active: article.likeFlag }" @click="onLike" />
        <van-icon name="star-o" :class="{ active: article.collectFlag }" @click="onCollection" />
      </div>
    </div>
  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  components: {},
  props: {},
  data() {
    return {
      article: {},
      data: {
        id: this.$route.params.id,
        optType: 1
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.getDetail(this.$route.params.id)
  },
  mounted() {},
  methods: {
    async getDetail(id) {
      const res = await instance({
        url: `/h5/interview/show`,
        params: { id: id },
        
      })
      this.article = res.data.data
    },
    async toggleState() {
      await instance({
        url: '/h5/interview/opt',
        method: 'post',
        data: this.data
      })
      await this.getDetail(this.$route.params.id)
      console.log(this.article)
    },
    async onLike() {
      this.data.optType = 1
      this.toggleState()
    },
    async onCollection() {
      this.data.optType = 2
      this.toggleState()
    },
    onBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.html {
  height: 100%;
}
.hm-detail {
  position: relative;
  height: 100%;
  width: 100%;
  .article {
    padding: 20px;
    .article-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .creator {
        font-weight: bold;
        margin-right: 10px;
      }
      .created-at {
        color: #999;
      }
    }
    .article-content {
      .stem {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .content {
        text-indent: 2em;
      }
    }
    .article-footer {
      margin-top: 10px;
      .like-count,
      .views {
        margin-right: 10px;
        color: #999;
      }
    }
    .btn {
      display: inline;
      position: fixed;
      right: 0;
      bottom: 150px;
      z-index: 99;

      .active {
        background: #fec635;
      }

      i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        margin-right: 20px;
        background-color: #fff;
      }
    }
  }
}
</style>
